// 此处完成购物车逻辑代码
//1. 先把list里面的数据渲染出来
// 渲染顶部 全选
// 获取content
let content = document.querySelector('.content');
let contentTop = document.createElement('div');
contentTop.classList.add('top');
contentTop.innerHTML = `
    <input type="checkbox"> 全选
    `;
content.append(contentTop);
// 渲染数据
let ulEl = document.createElement('ul');
ulEl.classList.add('center');
list.forEach((ele) => {
  let li = document.createElement('li');
  li.innerHTML = `
        <div class="select">
          <input type="checkbox">
        </div>
        <div class="pic">
          <img src="${ele.pic}" alt="">
        </div>
        <div class="name">
          ${ele.name}
        </div>
        <div class="price">
          ￥ <span>${ele.price}</span>
        </div>
        <div class="number">
          <button>-</button>
          <input type="text" value="${ele.buy_num}">
          <button>+</button>
        </div>
        <div class="subtotal">
          ￥ <span>0</span>
        </div>
        <div class="del">
          <button>删除</button>
        </div>
  `;
  ulEl.append(li);
});
content.append(ulEl);
// 添加底部
let contentBot = document.createElement('div');
contentBot.classList.add('bottom');
contentBot.innerHTML = `
    <p>总购买数量: 0</p>
    <p>
      <button class="pay">去结算</button>
      <button class="clear">清空购物车</button>
      <button class="clear_select">删除所有已选中</button>
      <button class="list">返回列表页</button>
    </p>
    <p>总价格 : ￥ <span class="pri">0</span></p>
`;
content.append(contentBot);
//2. 能够全选反选同时总价 总购买数量变化
// 全选按钮
let checkAll = document.querySelector('.top input');
let checks = [...document.querySelectorAll('.select input')];
// 重置函数
function reset() {
  let countEl = document.querySelector('.bottom :first-child');
  let pris = document.querySelector('.bottom :last-child .pri');
  countEl.innerHTML = `<p>总购买数量: 0</p>`;
  pris.textContent = 0;
}
// 全选按钮
checkAll.addEventListener('click', function () {
  checks.forEach((ele) => {
    ele.checked = checkAll.checked;
    if (checkAll.checked) {
      prices();
    } else {
      reset();
    }
  });
});
// 每个按钮
checks.forEach((ele, index) => {
  ele.onclick = function () {
    checkAll.checked = checks.every((item) => item.checked);
    // 调用选中时的函数
    checkFun();
  };
});
// li的小计
function subtotal() {
  let lis = [...document.querySelectorAll('li')];
  let subtotals = document.querySelectorAll('.subtotal span');
  lis.forEach((ele, index) => {
    subtotals[index].textContent =
      ele.children[3].children[0].textContent *
      ele.children[4].children[1].value;
  });
}
subtotal();
// 总价
function prices() {
  let totalPrice = 0;
  let sum = 0;
  let lis = [...document.querySelectorAll('li')];
  let countEl = document.querySelector('.bottom :first-child');
  let pris = document.querySelector('.bottom :last-child .pri');
  // 总价
  totalPrice = lis.reduce((prev, ele) => {
    return (prev += Number(ele.children[5].children[0].textContent));
  }, 0);
  // 总数量
  sum = lis.reduce((prev, ele) => {
    return prev + Number(ele.children[4].children[1].value);
  }, 0);
  countEl.innerHTML = `<p>总购买数量: ${sum}</p>`;
  pris.textContent = totalPrice;
}
//3. 单个商品数量能够加减 但是有限制 加减的时候小记价格，总价要变化，总购买数量也要变化
// 选中按钮的计算函数
function checkFun() {
  let totalPrice = 0;
  let sum = 0;
  let lis = [...document.querySelectorAll('li')];
  let checkeds = document.querySelectorAll('.select input');
  let countEl = document.querySelector('.bottom :first-child');
  let pris = document.querySelector('.bottom :last-child .pri');
  checkeds.forEach((ele, index) => {
    if (ele.checked) {
      sum += Number(lis[index].children[4].children[1].value);
      totalPrice += Number(lis[index].children[5].children[0].textContent);
    }
    countEl.innerHTML = `<p>总购买数量: ${sum}</p>`;
    pris.textContent = totalPrice;
  });
}
// 减按钮
let leftMinus = document.querySelectorAll('.number :first-child');
let totalNums = document.querySelectorAll('.number :nth-child(2)');
let rightAdd = document.querySelectorAll('.number :last-child');
leftMinus.forEach((ele, index) => {
  ele.onclick = function () {
    totalNums[index].value--;
    if (totalNums[index].value <= 0) {
      // leftMinus[index].disabled=true
      totalNums[index].value = 1;
    }
    // 调用小计函数
    subtotal();
    // 选中函数
    checkFun();
  };
});
// // 加按钮
rightAdd.forEach((ele, index) => {
  ele.onclick = function () {
    totalNums[index].value++;
    if (totalNums[index].value >= list[index].number) {
      // leftMinus[index].disabled=true
      totalNums[index].value = list[index].number;
    }
    // 调用小计函数
    subtotal();
    // 选中函数
    checkFun();
  };
});
//4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
let dels = document.querySelectorAll('.del button');
dels.forEach((ele, index) => {
  ele.addEventListener('click', function () {
    let lis = [...document.querySelectorAll('li')];
    ele.parentNode.parentNode.remove();
    checkFun();
    if (lis.length === 1) {
      reset();
    }
  });
});
//5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
let pitchs = document.querySelector('.clear_select');
pitchs.onclick = function () {
  checks.forEach((ele, index) => {
    if (ele.checked) {
      ele.parentNode.parentNode.remove();
      reset();
    }
  });
};
//6. 能够清空购物车，总数量和总价要对应变化
let clearBtn = document.querySelector('.clear');
clearBtn.onclick = function () {
  let centers = document.querySelector('.center');
  centers.remove();
  reset();
};
